<script setup lang="ts">
defineOptions({name: 'RoleCreate'})
import {getIsMobile, delObjEmptyVal} from "@/utils/helper"
import {useI18n} from "vue-i18n"
import {createRole} from '@/api/role'

const formRef = ref()
const visible = ref<boolean>(false)
const disabledSubmit = ref<boolean>(false)
const isMobile = getIsMobile()
const {t} = useI18n()
const formItems = ref<any>([
	{key: 'name', type: 'input', placeholder: t('common.inputPlaceholder'), clearable: true, span: 24},
	{
		label: t('common.field.sort'), key: 'sort', type: 'input', clearable: true, span: 24,
		placeholder: t('common.inputPlaceholder') + t('common.field.sort')
	},
	{key: 'status', type: 'radiogroup', span: 24},
])

const formRules = {
	name: [{required: true, message: t('formRule.required'), trigger: 'blur'}],
	sort: [{required: true, message: t('formRule.required'), trigger: 'blur'}],
	status: [{required: true, message: t('formRule.required'), trigger: 'blur'}]
}

const formData = ref<any>({
	name: undefined,
	sort: 1000,
	status: 1
})

interface emits {
	(e: 'success', params: Record<string, any>): void
}

interface Props {
	enumData?: Record<string, any>
	languageData?: Record<string, any>
}

const props = defineProps<Props>()
const emit = defineEmits<emits>()

const handleSubmit = async () => {
	await formRef.value.validate()
	if (disabledSubmit.value) return false
	disabledSubmit.value = true
	try {
		const sendData = {...formData.value}
		delObjEmptyVal(sendData)
		const res = await createRole(sendData)
		emit('success', res)
		setTimeout(() => {
			close()
		}, 600)
	} catch (error) {
		console.error('[RoleCreate] Unexpected error:', error)
	} finally {
		setTimeout(() => {
			disabledSubmit.value = false
		}, 800);
	}
}

watch(() => props.enumData, (newVal: any) => {
	if (newVal.role) {
		formItems.value.forEach((item: any, index: any) => {
			if (newVal.role[item.key]) formItems.value[index].options = newVal.role[item.key]
		})
	}
}, {immediate: true});

watch(() => props.languageData, (newVal: any) => {
	if (newVal.role) {
		formItems.value.forEach((item: any, index: any) => {
			if (!item.label && newVal.role.field[item.key]) {
				formItems.value[index].label = newVal.role.field[item.key]
				if (item.placeholder) {
					formItems.value[index].placeholder = item.placeholder + newVal.role.field[item.key]
				}
			}
		})
	}
}, {immediate: true});

const open = () => visible.value = true

const close = () => {
	formRef.value.reset()
	visible.value = false
}

defineExpose({open, close})
</script>

<template>
	<div class="form-operate-box">
		<ElDialog
			v-model="visible" :title="t('common.create')" :width="isMobile ? '100%' : '500px'"
			@close="close" :close-on-click-modal="false" :align-center="true" :draggable="true"
		>
			<ArtForm ref="formRef" labelPosition="top" v-model="formData" :items="formItems"
				 :rules="formRules" :disabledSubmit="disabledSubmit" :showReset="false"
				 @close="close" @submit="handleSubmit"/>
		</ElDialog>
	</div>
</template>

<style scoped lang="scss">
.form-operate-box {
	:deep(.el-form-item--label-top .el-form-item__label) {
		margin-left: 3px !important;
		margin-bottom: 2px !important;
	}

	:deep(.el-dialog__body) {
		padding: 0 !important;
	}

	:deep(.action-buttons-wrapper) {
		margin-top: 8px !important;
		justify-content: flex-end !important;
	}
}
</style>